<template>
    <div class="service-order-detail-container">
        <!-- 页面头部 -->
        <div class="page-header">
            <div class="header-content">
                <div class="header-left">
                    <h2>服务订单详情</h2>
                </div>
                <div class="header-right">
                    <el-button @click="handleBack">
                        <el-icon><ArrowLeft /></el-icon>
                        返回
                    </el-button>
                </div>
            </div>
        </div>

        <!-- 详情内容 -->
        <div class="detail-content">
            <el-card shadow="never" class="detail-card">
                <!-- 订单信息、支付信息、下单人信息 -->
                <div class="info-section">
                    <div class="info-grid">
                        <!-- 订单信息 -->
                        <div class="info-item">
                            <h3>订单信息</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">订单ID:</span>
                                    <span class="value">{{ orderDetail.orderId }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">订单状态:</span>
                                    <el-tag 
                                        :type="getStatusType(orderDetail.orderStatus)"
                                        size="small"
                                    >
                                        {{ orderDetail.orderStatus }}
                                    </el-tag>
                                </div>
                                <div class="info-row">
                                    <span class="label">创建时间:</span>
                                    <span class="value">{{ orderDetail.createTime }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">备注:</span>
                                    <span class="value">{{ orderDetail.remark || '' }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 支付信息 -->
                        <div class="info-item">
                            <h3>支付信息</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">支付单号:</span>
                                    <span class="value">{{ orderDetail.paymentNumber || '' }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">支付方式:</span>
                                    <span class="value">{{ orderDetail.paymentMethod }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">支付时间:</span>
                                    <span class="value">{{ orderDetail.paymentTime || '' }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- 下单人信息 -->
                        <div class="info-item">
                            <h3>下单人信息</h3>
                            <div class="info-content">
                                <div class="info-row">
                                    <span class="label">下单账户:</span>
                                    <span class="value">{{ orderDetail.ordererAccount }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">历史订单总数:</span>
                                    <span class="value">{{ orderDetail.totalOrders }}个</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">手机号:</span>
                                    <span class="value">{{ orderDetail.phoneNumber }}</span>
                                </div>
                                <div class="info-row">
                                    <span class="label">日期:</span>
                                    <span class="value">{{ orderDetail.date }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 商品信息 -->
                <div class="product-section">
                    <h3>商品信息</h3>
                    <div class="product-info">
                        <div class="product-summary">
                            <div class="summary-row">
                                <span class="label">商品总价:</span>
                                <span class="value">¥{{ orderDetail.totalPrice }}</span>
                            </div>
                            <div class="summary-row">
                                <span class="label">物流费用:</span>
                                <span class="value">¥{{ orderDetail.shippingFee }}</span>
                            </div>
                        </div>
                        <div class="product-item">
                            <div class="item-image">
                                <div class="product-icon">
                                    <div class="yin-yang-symbol"></div>
                                </div>
                            </div>
                            <div class="item-details">
                                <div class="item-name">{{ orderDetail.productName }}</div>
                                <div class="item-price">
                                    <span class="label">单价</span>
                                    <span class="value">{{ orderDetail.unitPrice }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="payment-amount">
                            <span class="label">支付金额:</span>
                            <span class="value">¥{{ orderDetail.paymentAmount }}</span>
                        </div>
                    </div>
                </div>

                <!-- 算命结果 -->
                <div class="result-section">
                    <h3>算命结果</h3>
                    <div class="result-content">
                        <div class="result-row">
                            <span class="label">述求:</span>
                            <span class="value">{{ orderDetail.request }}</span>
                        </div>
                        <div class="result-row">
                            <span class="label">结论:</span>
                            <span class="value">{{ orderDetail.conclusion || '' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 评论 -->
                <div class="comment-section">
                    <h3>评论</h3>
                    <div class="comment-content">
                        <span class="no-comment">暂无评论</span>
                    </div>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ArrowLeft } from '@element-plus/icons-vue';

const route = useRoute();
const router = useRouter();

const id = route.params.id as string;

// 订单详情数据
const orderDetail = ref({
    orderId: '253',
    orderStatus: '待付款',
    createTime: '2025-07-09 20:20:13',
    remark: '',
    paymentNumber: '',
    paymentMethod: '余额支付',
    paymentTime: '',
    ordererAccount: 'MJ1489',
    totalOrders: 45,
    phoneNumber: '188888888',
    date: '2025.07.27 10:00',
    totalPrice: 1,
    shippingFee: 0,
    productName: '摇卦',
    unitPrice: '20.00',
    paymentAmount: 1,
    request: '今年能否跳槽顺利?',
    conclusion: ''
});

// 返回操作
const handleBack = () => {
    router.push('/service-order-list');
};

// 获取状态类型
const getStatusType = (status: string) => {
    switch (status) {
        case '待付款':
            return 'warning';
        case '待评价':
            return 'info';
        case '服务中':
            return 'warning';
        case '已完成':
            return 'success';
        case '已取消':
            return 'danger';
        default:
            return 'info';
    }
};

// 页面初始化
onMounted(() => {
    // 加载订单详情数据
    loadOrderDetail(id);
});

// 加载订单详情
const loadOrderDetail = (orderId: string) => {
    // 模拟加载数据，根据订单ID设置不同状态
    switch (orderId) {
        case '1':
            // 待付款状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待付款',
                paymentNumber: '',
                paymentTime: '',
                conclusion: ''
            };
            break;
        case '2':
            // 待评价状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待评价',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                conclusion: '年底12月-明年4月能顺利跳槽'
            };
            break;
        case '3':
            // 服务中状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '服务中',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                conclusion: '年底12月-明年4月能顺利跳槽'
            };
            break;
        case '4':
            // 已完成状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '已完成',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                conclusion: '年底12月-明年4月能顺利跳槽'
            };
            break;
        case '5':
            // 已取消状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '已取消',
                paymentNumber: '54545487',
                paymentTime: '2025-07-09 20:20:15',
                conclusion: ''
            };
            break;
        default:
            // 默认待付款状态
            orderDetail.value = {
                ...orderDetail.value,
                orderStatus: '待付款',
                paymentNumber: '',
                paymentTime: '',
                conclusion: ''
            };
    }
};
</script>

<style scoped>
.service-order-detail-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.page-header {
    border-radius: 8px;
    margin-bottom: 20px;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left h2 {
    margin: 0;
    color: #333;
    font-size: 24px;
}

.detail-content {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.detail-card {
    border-radius: 8px;
    padding: 30px;
}

/* 信息区域 */
.info-section {
    margin-bottom: 30px;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.info-item h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.info-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.label {
    color: #666;
    font-size: 14px;
    min-width: 80px;
}

.value {
    color: #333;
    font-size: 14px;
}

/* 商品信息区域 */
.product-section {
    margin-bottom: 30px;
}

.product-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.product-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.product-summary {
    display: flex;
    gap: 30px;
}

.summary-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.item-image {
    flex-shrink: 0;
}

.product-icon {
    width: 50px;
    height: 50px;
    border: 2px solid #d4af37;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fafafa;
}

.yin-yang-symbol {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(45deg, #333 50%, #fff 50%);
    position: relative;
}

.yin-yang-symbol::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #333;
}

.yin-yang-symbol::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

.item-details {
    flex: 1;
}

.item-name {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.item-price {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payment-amount {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

/* 算命结果区域 */
.result-section {
    margin-bottom: 30px;
}

.result-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.result-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.result-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.result-row .label {
    min-width: 60px;
}

.result-row .value {
    flex: 1;
    line-height: 1.5;
}

/* 评论区域 */
.comment-section h3 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 16px;
    font-weight: 600;
}

.comment-content {
    padding: 20px 0;
}

.no-comment {
    color: #999;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .service-order-detail-container {
        padding: 10px;
    }
    
    .header-content {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
    
    .detail-card {
        padding: 20px;
    }
    
    .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .product-summary {
        flex-direction: column;
        gap: 10px;
    }
    
    .product-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .payment-amount {
        justify-content: flex-start;
    }
}
</style>
